<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>富扬数据看板</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/select2.min.css">
  <link rel="stylesheet" href="/stylesheets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/stylesheets/skins/_all-skins.min.css">
  <style>
    .delete, .update{
      cursor: pointer;
    }
    .input-xs{
      height: 20px;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .h-300{
      height: 200px;
      overflow: auto;
    }
    a:hover{
      text-decoration: underline;
    }
    .content-header>h1>.breadcrumb {
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      border-radius: 2px;
      display: inline-block;
    }
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

  <%- include("./public/header.ejs") %>

  <%- include("./public/aside.ejs") %>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        设置
        <ol class="breadcrumb">
          <li><a href="/"><i class="glyphicon glyphicon-dashboard"></i>首页</a></li>
          <li class="active">设置</li>
        </ol>
      </h1>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-md-3">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">
                部门管理
                <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-team">添加部门</a>
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered table-condensed table-striped">
                <tr>
                  <th>名称</th>
                  <th style="width: 80px;text-align: center;">操作</th>
                </tr>
              </table>
              <div class="h-300">
                <table class="table table-bordered table-condensed table-striped table-hover">
                  <% for(let i=0;i<teamData.length;i++){ %>
                    <tr>
                      <td><%= teamData[i].tName %></td>
                      <td style="width: 80px;text-align: center;" align="center"><a class="deleteTeam delete" data-href="/setting/deleteTeam?tId=<%= teamData[i].tId %>">删除</a></td>
                    </tr>
                  <% } %>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">
                职位管理
                <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-job">添加职位</a>
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered table-condensed table-striped">
                <tr>
                  <th>名称</th>
                  <th style="width: 80px;text-align: center;">操作</th>
                </tr>
              </table>
              <div class="h-300">
                <table class="table table-bordered table-condensed table-striped table-hover">
                  <% for(let i=0;i<jobData.length;i++){ %>
                    <tr>
                      <td><%= jobData[i].jName %></td>
                      <td style="width: 80px;text-align: center;" align="center"><a class="deleteJob delete" data-href="/setting/deleteJob?jId=<%= jobData[i].jId %>">删除</a></td>
                    </tr>
                  <% } %>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">
                汇率管理
                <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-exchangeRate">添加汇率</a>
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered table-condensed table-striped">
                <tr>
                  <th style="width: 60px;">币种</th>
                  <th>汇率</th>
                </tr>
              </table>
              <div class="h-300">
                <table class="table table-bordered table-condensed table-striped table-hover">
                  <% for(let i=0;i<exchangeRateData.length;i++){ %>
                    <tr>
                      <td style="width: 60px;"><%= exchangeRateData[i].currency %></td>
                      <td>
                        <input type="text" class="form-control input-xs exchangeRate" placeholder="汇率" name="currency" required autocomplete="off" value="<%= exchangeRateData[i].exchangeRate %>" data-href="/setting/updateExchangeRate?eId=<%= exchangeRateData[i].eId %>">
                      </td>
                    </tr>
                  <% } %>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">
                提成管理
                <!-- <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-rebates">添加提成</a> -->
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered table-condensed table-striped">
                <tr>
                  <th style="width: 70px;">部门</th>
                  <th>提成</th>
                </tr>
              </table>
              <div class="h-300">
                <table class="table table-bordered table-condensed table-striped table-hover">
                  <% for(let i=0;i<rebatesData.length;i++){ %>
                    <tr>
                      <td style="width: 70px;"><%= rebatesData[i].team %></td>
                      <td>
                        <input type="text" class="form-control input-xs rebates" placeholder="提成" name="rebates" required autocomplete="off" value="<%= rebatesData[i].rebates %>" data-href="/setting/updateRebates?rId=<%= rebatesData[i].rId %>">
                      </td>
                    </tr>
                  <% } %>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-10">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">
                操作日志
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body" style="height: 252px;overflow:auto;">
              <% for(let i=0;i<logData.length;i++){ %>
                <p> <%- new Date( logData[i].time ).toLocaleDateString() %> : <%- logData[i].message %> </p>
              <% } %>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<!-- 添加部门 -->
<div class="modal fade" id="modal-team">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/setting/addTeam">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入部门名称</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" placeholder="部门名称" name="tName" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- 添加职位 -->
<div class="modal fade" id="modal-job">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/setting/addJob">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入职位名称</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" placeholder="职位名称" name="jName" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- 添加汇率 -->
<div class="modal fade" id="modal-exchangeRate">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/setting/addExchangeRate">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入 币种 和 汇率</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" placeholder="币种" name="currency" required autocomplete="off">
          <input type="text" class="form-control" placeholder="汇率" name="exchangeRate" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- 添加提成 -->
<div class="modal fade" id="modal-rebates">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/setting/addRebates">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入 部门 和 提成(0~1)</h4>
        </div>
        <div class="modal-body">
          <select class="form-control addTeam" style="width: 100%;" name="team" required></select>
          <input type="text" class="form-control" placeholder="提成(0~1)" name="rebates" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/select2.full.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>
<script>
  // 删除部门
  $('.deleteTeam').click(function(){
    if(confirm("请确认已无员工属于该部门")){
      location.href = this.dataset.href;
    }
  })

  // 删除职位
  $('.deleteJob').click(function(){
    if(confirm("请确认已无员工属于该职位")){
      location.href = this.dataset.href;
    }
  })

  // 修改汇率
  $(".exchangeRate").change(function(){
    location.href = this.dataset.href + '&exchangeRate=' + this.value;
  })

  const teamData = <%- JSON.stringify(teamData) %>;
  // 添加用户-部门
  $('.addTeam').select2({
    minimumResultsForSearch: -1,
    allowClear: true,
    placeholder: '请选择部门',
    data: [{
      id:'', text:''
    }, ...teamData.map(val=>({
      id: val.tId,
      text: val.tName
    }))]
  })
</script>
</body>
</html>
